<template>
	<el-container>
        <el-aside width="200px" v-loading="showGrouploading">
            <el-container>
                <el-header>
                    <el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
                </el-header>
                <el-main class="nopadding">
                    <el-tree ref="group" class="menu" node-key="id" :data="group" :props="groupProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
                <div class="left-panel">
                    <el-button type="warning" @click="batch_export" v-auth="'stock.export'">导出</el-button>
                </div>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-input v-model="search.keyword" placeholder="产品名称/产品编号" clearable @keyup.enter="upsearch"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        <el-button type="primary" @click="unsetSearch">重置</el-button>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" :apiObj="apiObj" remoteSummary row-key="id" @selection-change="selectionChange" stripe remoteSort>
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                    <el-table-column label="产品编号" prop="goods_code" align="center" width="100"></el-table-column>
                    <el-table-column label="产品图片" align="center">
                        <template #default="scope">
                            <el-image v-if="scope.row.goods_image" style="width: 30px; height: 30px; border-radius: 5px;" :src="scope.row.goods_image" :preview-src-list="[scope.row.goods_image]" preview-teleported="true" hide-on-click-modal align="center"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="产品名称" prop="goods_name" align="center" width="100"></el-table-column>
                    <el-table-column label="规格型号" prop="goods_spec" align="center" width="100"></el-table-column>
                    <el-table-column label="产品类型" prop="cate_name" align="center" width="100"></el-table-column>
                    <el-table-column label="总计" align="center">
                        <el-table-column label="移动平均价" prop="avg" align="center" width="100"></el-table-column>
                        <el-table-column label="可用库存" prop="total_stock" align="center" width="100">
                        </el-table-column>
                        <el-table-column label="成本总额" prop="total_money" align="center" width="100"></el-table-column>
                    </el-table-column>
                    <el-table-column v-for="item in headList" :key="item.field" :label="item.value" align="center">
                        <el-table-column label="移动平均价" prop="avg" align="center" width="100">
                            <template #default="scope">
                                {{scope.row.warehouse[item.field].average_price}}
                            </template>
                        </el-table-column>
                        <el-table-column label="可用库存" prop="total_stock" align="center" width="100">
                            <template #default="scope">
                                {{scope.row.warehouse[item.field].curr_stock}}
                            </template>
                        </el-table-column>
                        <el-table-column label="成本总额" prop="total_money" align="center" width="100">
                            <template #default="scope">
                                {{scope.row.warehouse[item.field].total_price}}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
	</el-container>

</template>

<script>
export default {
	name: '库存查询（列表）',
	components: {},
	data() {
		return {
			dialog: {},
			apiObj: this.$API.ware.body,
			selection: [],
			search: {
				ware_id: null,
				keyword: null,
			},
            headList: [],
            showGrouploading: false,
			groupFilterText: '',
			group: [],
            groupProps: {
				label: (data) => {
					return data.cate_name
				}
			},
		}
	},
    watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
        this.getWareData()
        this.getGroup()
	},
	methods: {
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		/**重置*/
		unsetSearch() {
			Object.keys(this.search).forEach(key => {
				this.search[key] = null;
			});
			this.upsearch()
		},
        //加载树数据
		async getGroup() {
			this.showGrouploading = true;
			var res = await this.$API.goods.goodsCate.all.get();
			this.showGrouploading = false;
			var allNode = { id: '', cate_name: '所有' }
			res.data.unshift(allNode);
			this.group = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.cate_name.indexOf(value) !== -1;
		},
		groupClick(node) {
            this.pid = node.id
			var params = {
				cate_id: node.id
			}
			this.$refs.table.reload(params)
        },
        /**获取仓库key*/
		async getWareData() {
			var res = await this.$API.ware.head.get();
			this.headList = res.data.table;
		},
        async batch_export(){
            var ids = [];
			this.selection.forEach((item) => {
				ids.push(item.id)
			})
            let query = {
                id:ids,
                keyword: this.search.keyword
            }
            var res = await this.$API.ware.export.get(query)
            if (res.code == 1) {
                const fileUrl = res.data.url;
                const link = document.createElement("a");
                link.href = fileUrl;
                link.download = fileUrl;
                link.click();
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
	}
}
</script>

<style></style>
